/**
 * Created by Ysssssss on 20/4/16.
 */

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';

class SliderList extends PureComponent {
    static propTypes = {
        className: PropTypes.string,
        theme: PropTypes.string,
        width: PropTypes.number,
        height: PropTypes.number,
        children: PropTypes.node,
    }

    constructor(props) {
        super(props);
        this.state = {
            selectedIndex: 0,
            slideList: []
        }
        this.timeout = null
        this.handleSelectedChange = this.handleSelectedChange.bind(this)
        this.clearTimeout = this.clearTimeout.bind(this)
        this.resetTimeout = this.resetTimeout.bind(this)
    }

    componentDidMount () {
        this.resetTimeout()
    }

    static getDerivedStateFromProps (props) {
        return {
            slideList: (props.children || []).filter(child => child)
        }
    }

    componentDidUpdate (prevProps, prevState) {
        if (prevState.slideList.length !== this.state.slideList.length) {
            this.resetTimeout()
        }
    }

    componentWillUnmount () {
        this.clearTimeout()
    }

    clearTimeout () {
        if (this.timeout) {
            clearTimeout(this.timeout)
        }
    }

    resetTimeout () {
        if (this.timeout) {
            clearTimeout(this.timeout)
        }
        const { slideList } = this.state
        if (slideList.length <= 1) return;
        this.timeout = setTimeout(() => {
            const { selectedIndex } = this.state
            this.setState({
                selectedIndex: selectedIndex >= slideList.length - 1 ? 0 : selectedIndex + 1
            })
            this.timeout = null
            this.resetTimeout()
        }, 3000)
    }

    handleSelectedChange (index) {
        this.resetTimeout()
        this.setState({
            selectedIndex: index
        })
    }

    render () {
        const { selectedIndex, slideList } = this.state
        const { className, theme, width, height } = this.props
        const style = {
            width: `${width}px`,
            height: `${height}px`
        }

        return (
            <div className={`slider-list-container${className ? ` ${className}` : ''}`}
                 style={style}
                 onMouseEnter={this.clearTimeout}
                 onMouseLeave={this.resetTimeout}
            >
                { slideList.length ? (
                    <div className="slider-list"
                         style={{
                             transform: `translateX(${-width * selectedIndex}px)`,
                             width: `${width * slideList.length}px`
                         }}
                    >
                        { slideList.map((child,index) => child ? (
                            <div className="slider-item"
                                 key={`slider-item-${index}`}
                                 style={style}
                            >
                                { child }
                            </div>
                        ) : child) }
                    </div>
                ) : null }
                { slideList.length && slideList.length > 1 ? (
                    <div className="slider-dot-list">
                        { slideList.map((child, index) => index === selectedIndex ? (
                            <div className="slider-dot selected"
                                 key={`slider-dot-${index}`}
                                 style={{ backgroundColor: theme || '#D8D8D8' }}
                                 onClick={() => this.handleSelectedChange(index)}
                            />
                        ) : (
                            <div className="slider-dot"
                                 key={`slider-dot-${index}`}
                                 onClick={() => this.handleSelectedChange(index)}
                            />
                        )) }
                    </div>
                ) : null }
            </div>
        )
    }
}

export default SliderList